import HomeCard from '@/components/HomeCard'
import { useCharts } from '@/hooks/useCharts'
import { useModel } from '@umijs/max'
import React, { useEffect } from 'react'

const LastMoneyLine = ({ dateTypeObj }) => {
  const { GetFinalPaymentCurve } = useModel('DataCenter')
  const [lastMoneyLineRef, lastMoneyLineChart, lastMoneyLineLoading, setLastMoneyLineLoading] = useCharts() // 尾款走势折线图

  useEffect(() => {
    if (lastMoneyLineChart) getLastMoneyTrendData()
  }, [lastMoneyLineChart])

  const getLastMoneyTrendData = async (dateType = '近一周') => {
    lastMoneyLineChart?.clear()
    setLastMoneyLineLoading(true)
    let params = {
      dateType: dateTypeObj[dateType].type
    }

    const res = await GetFinalPaymentCurve(params)
    let baseSeries = {
      type: 'line',
      smooth: true,
      showSymbol: false,
      itemStyle: {
        borderRadius: 5
      },
      lineStyle: {
        type: 'dashed'
      },
      stack: '当日已收尾款'
    }
    let endValue = dateTypeObj[dateType].endValue
    let series = [
      {
        name: '当日已收尾款',
        field: 'today_received_amount',
        data: [],
        ...baseSeries
      },
      {
        name: '当日待收尾款',
        field: 'today_wait_amount',
        data: [],
        ...baseSeries
      }
    ]
    let xAxisData = []

    if (res) {
      res.forEach(item => {
        xAxisData.push(item.date_string)
        series[0].data.push(item.today_received_closing_amount) // 当日已收尾款
        series[1].data.push(item.today_wait_closing_amount) // 当日待收尾款
      })
      let option = {
        tooltip: {
          trigger: 'axis',
          backgroundColor: '#1E1B39',
          borderRadius: 10,
          borderColor: '#1E1B39',
          color: '#fff',
          textStyle: {
            fontFamily: 'DINPro-Medium',
            color: '#fff'
          }
        },
        dataZoom: {
          type: 'slider',
          realtime: true,
          startValue: 0, // 重点
          endValue,
          xAxisIndex: [0],
          bottom: '10',
          left: '30',
          right: '30',
          height: 10,
          borderColor: 'rgba(0,0,0,0)'
        },
        xAxis: [
          {
            // boundaryGap: false,
            type: 'category',
            data: xAxisData,
            axisLine: {
              lineStyle: {
                color: '#999'
              }
            },
            axisLabel: {
              fontFamily: 'DINPro-Medium',
              interval: 0,
              rotate: 40,
              fontSize: 9
            }
          }
        ],
        color: ['#165DFF', '#93AAFD'],
        toolbox: {
          show: true,
          top: '10px',
          right: '50px',
          feature: {
            mark: { show: true },
            magicType: {
              show: true,
              type: ['line', 'bar', 'stack', 'tiled'],
              option: {
                line: {
                  stack: '已收租金'
                },
                bar: {
                  stack: false
                }
              }
            }
          }
        },
        legend: {
          top: '10px',
          left: '50px',
          itemWidth: 10,
          itemHeight: 10,
          itemGap: 40,
          icon: 'circle',
          data: series.map(item => item.name)
        },
        grid: {
          left: '4%',
          right: '4%'
        },
        yAxis: {
          type: 'value',
          splitNumber: 4,
          axisLabel: {
            fontFamily: 'DINPro-Medium'
          },
          splitLine: {
            lineStyle: {
              type: 'line',
              color: '#DDD'
            }
          },
          axisLine: {
            show: false
          },
          nameTextStyle: {
            color: '#999'
          },
          splitArea: {
            show: false
          }
        },
        series
      }
      lastMoneyLineChart?.setOption(option)
      setLastMoneyLineLoading(false)
    }
  }

  return (
    <HomeCard
      width={'100%'}
      height={'500px'}
      margin={[0, 0, 20, 0]}
      leftContent={{
        subTitle: '尾款走势图'
      }}
      loading={lastMoneyLineLoading}
      isTab
      tabClick={item => getLastMoneyTrendData(item)}
    >
      <div ref={lastMoneyLineRef} className='chart_box' />
    </HomeCard>
  )
}
export default LastMoneyLine
